<template>
	<view class="page">
		<!-- <up-navbar title="" @leftClick="leftClick" @rightClick="{}" :autoBack="false" bgColor = "#fff" placeholder></up-navbar> -->
		<view class="content flex column box-sizing flex-center items-center width-full padding-30">
			<view class="imageBox">
				<image class="imageBj" :src="info.image_url"></image>
			</view>
			<view
				class="flex box-sizing space-between borderRadius-8 padding-30 width-full marginBottom-30 marginTop-30"
				style="border: 1rpx solid #ededed;">
				<view class="flex column flex-center items-center">
					<view class="fontSize-50 weight-700">
						{{info.max_memory?info.max_memory>0?'+'+info.max_memory:info.max_memory:0}}
					</view>
					<view class="fontSize-26 color-696969 marginBottom-20">
						记忆单词
					</view>
				</view>
				<view class="flex column flex-center items-center">
					<view class="fontSize-50 weight-700">
						{{info.reishilv?info.reishilv>0?'+'+info.reishilv+'%':info.max_memory+'%':0+'%'}}
					</view>
					<view class="fontSize-26 color-696969 marginBottom-20">
						熟悉词率
					</view>
				</view>
				<view class="flex column flex-center items-center">
					<view class="fontSize-50 weight-700">
						{{info.times}}
					</view>
					<view class="fontSize-26 color-696969 marginBottom-20">
						用时
					</view>
				</view>
			</view>
			<view class="textBox fontSize-28 box-sizing width-full padding-50">
				<span v-html="info.describe? info.describe.replace(/\/n/g, ' ') : ''"></span>
			</view>
		</view>
		<view class="width-full box-sizing btns flex column items-center flex-center">
			<view class="marginTop-30 flex flex-center" style="width: 80vw;">
				<up-button @click="leftClick" size="normal" type="primary" text="开启记忆之旅"></up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app';
	const MemoryWordstatApi = inject('MemoryWordstat');
	const info = ref({})
	onLoad(() => {
		MemoryWordstatApi().then(res => {
			console.log(res, 'iiiiiiiiiiiii')
			info.value = res && res[0] ? res[0] : {}
		})
	})

	const leftClick = () => {
		uni.redirectTo({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss" scoped>
	.btns {
		padding-bottom: calc(50rpx);
	}

	.imageBox {
		height: 500rpx;
		width: 100%;
		overflow: hidden;
	}

	.imageBj {
		height: 500rpx;
		width: 100%;
		// scale: 1.15;
	}

	.textBox {
		line-height: 45rpx;
	}
</style>